<template>
	<div>
		<el-container>
			<head-top></head-top>
			<el-header>
				<el-form :inline="true" :model="formInline" @submit.native.prevent class="form-inline form-menu-list">
					<el-form-item label="发布名称">
						<el-input v-model="formInline.deploymentName" placeholder="发布名称" @keyup.enter.native="onSearch"></el-input>
					</el-form-item>
					<el-form-item label="wayne命名空间">
						<el-input v-model="formInline.departmentName" placeholder="wayne命名空间" @keyup.enter.native="onSearch"></el-input>
					</el-form-item>
					<el-form-item label="访问地址">
						<el-input v-model="formInline.ingress" placeholder="ingress" @keyup.enter.native="onSearch"></el-input>
					</el-form-item>
					<el-form-item label="集群名称">
						<el-select v-model="formInline.wayneId" autocomplete="off">
							<el-option v-for="key in Object.keys(deploykubenetesnameoptions)" :key="key" :label="deploykubenetesnameoptions[key]"
							 :value="key"></el-option>
						</el-select>
						<!-- <el-input v-model="formInline.wayneId" placeholder="wayne集群" @keyup.enter.native="onSearch"></el-input> -->
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch">查询</el-button>
					</el-form-item>
				</el-form>
			</el-header>
			<el-main>
				<div style="margin-top: 20px">
					<el-button size="medium" type="primary" icon="el-icon-edit" @click="pushService()">添加到已有服务</el-button>
					<el-button size="medium" type="primary" icon="el-icon-edit" @click="create()">新增服务</el-button>
				</div>
				<el-table :data="tableData" :row-class-name="tableRowClassName" @selection-change="chooseInstance" ref="multipleTable">
					<el-table-column type="selection" width="55">
					</el-table-column>

					<!-- 	<el-table-column label="选择" width="100" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-radio class="radio" v-model="radio" :label="scope.$index">&nbsp;</el-radio>
                    </template>
                </el-table-column> -->
					<el-table-column prop="deploymentName" label="发布名称" width="230">
					</el-table-column>
					<el-table-column prop="ingress" label="访问地址" width="260">
					</el-table-column>
					<el-table-column prop="serviceName" label="负载均衡" width="260">
					</el-table-column>
					<el-table-column prop="departmentName" label="wayne命名空间" width="150">
					</el-table-column>
					<el-table-column prop="wayneId" label="集群名称" width="120" :formatter="formatterk8sName">

					</el-table-column>
					<el-table-column prop="description" label="描述" width="150">
					</el-table-column>
					<el-table-column prop="cmdbServiceId" label="关联服务" width="150" :formatter="formatterServiceName">
					</el-table-column>
					<el-table-column prop="wayneView" label="wayne地址" width="100">
						<template slot-scope="scope">
							<a target="_blank" :href="scope.row.wayneView" v-show="scope.row.wayneView">跳转wayne</a>
						</template>
					</el-table-column>

					</el-table-column>

				</el-table>
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					 :page-sizes="[10, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
					</el-pagination>
				</div>
				<el-dialog title="服务编辑" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogFormVisible"
				 v-dialogDrag>
					<el-form :model="dialogform" :rules="rules2" ref="dialogform">
						<el-form-item label="服务名称">
							<el-input v-model="dialogform.servicename" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="开发人员" prop="idcid">
							<el-input v-model="dialogform.servicedeveloper" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="描述">
							<el-input v-model="dialogform.description" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="部署命名">
							<el-input v-model="dialogform.deployName" placeholder="正式环境,测试环境等" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="jenkins地址">
							<el-input v-model="dialogform.jenkinsView" placeholder="jenkins地址" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogFormsubmit('dialogform')">确 定</el-button>
					</div>
					</el-dialog>
				<el-dialog title="服务编辑" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogFormVisible2" v-dialogDrag>
					<el-form :model="dialogform2" :rules="rules2" ref="dialogform2">
						<el-form-item label="服务名称">
							<el-select v-model="dialogform2.id" filterable placeholder="请选择" style="width: 100%">
							  <el-option
							    v-for="item in serviceList"
							    :key="item.id"
							    :label="item.servicename"
							    :value="item.id">
							  </el-option>
							</el-select>
						</el-form-item>
				
				<el-form-item label="部署命名">
					<el-input v-model="dialogform2.deployName"  placeholder="正式环境,测试环境等"  autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="jenkins地址">
					<el-input v-model="dialogform2.jenkinsView" placeholder="jenkins地址" autocomplete="off"></el-input>
				</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible2 = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormsubmit2('dialogform2')">确 定</el-button>
				</div>
				</el-dialog>
				
				
			</el-main>
		</el-container>
	</div>
</template>
<script>
	import {
		search,
		createservice,
		pushtoservice
	} from '@/api/wayneService'
	import {
		listwithoutdeploy
	} from '@/api/service'
	import headTop from '@/components/headTop'
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				formInline: {

				},
				tableData: [],
				count: 0,
				currentPage: 1,
				pageSize: 10,
				dialogform: {},
				dialogFormVisible: false,
				dialogFormVisible2: false,
				rules2: {},
				tableSelection: {},
				dialogform2: {},

			}
		},
		computed: {
			...mapGetters({
				deploykubenetesnameoptions: 'getDeploykubenetesnameoptions',
				serviceList: 'getservicewithoutdeployOptions',
			}),
		},
		created() {
			this.$store.dispatch('setServiceOptions');
			this.onSearch();
		},
		methods: {
			async onSearch() {

				await search(this.formInline, this.pageSize, this.currentPage)
					.then((response) => {
						this.inittable(response)
					})
			},
			inittable(response) {
				this.tableData = response.items;
				this.count = response.totalNum;
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.status == 1) {
					return 'warning-row';
				} else if (row.status == 0) {
					return 'success-row';
				}
				return '';
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.onSearch();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.onSearch();
			},
			create() {
				let alert = false;
				if (!this.tableSelection) {
					alert = true;
				}
				let cmdbDeployList = JSON.stringify(this.tableSelection)
				if (cmdbDeployList == "{}") {
					alert = true;

				}
				
				if (alert) {
					this.$message({
						type: 'error',
						message: '请选择一条记录进行服务新增'
					});
					return;
				}
				if(this.tableSelection.cmdbServiceId){
					this.$message({
						type: 'error',
						message: '已经关联了服务,不能进行相关操作'
					});
					return;
				}
				this.dialogFormVisible = true;
				this.dialogform = {
					cmdbDeployList: []
				}
				this.dialogform.cmdbDeployList.push(JSON.parse(cmdbDeployList));
			},
			formatterk8sName(row, column, cellValue, index) {
				return this.deploykubenetesnameoptions[cellValue]
			},
			formatterServiceName(row, column, cellValue, index) {
				let serviceName = '';
				console.log("this.serviceList: " + this.serviceList);
				if (this.serviceList) {
					this.serviceList.some(item => {
						if (item.id == cellValue) {
							serviceName = item.servicename
							return
						}
					})

				}
				return serviceName;
			},
			dialogFormsubmit() {
				this.dialogform.cmdbDeployList[0]["k8sName"] = this.dialogform.cmdbDeployList[0].wayneId
				this.dialogform.cmdbDeployList[0]["k8sDeployment"] = this.dialogform.cmdbDeployList[0].deploymentName
				this.dialogform.cmdbDeployList[0]["k8sDeploymentid"] = this.dialogform.cmdbDeployList[0].deploymentId
				this.dialogform.cmdbDeployList[0]["serviceUrl"] = this.dialogform.cmdbDeployList[0].ingress
				this.dialogform.cmdbDeployList[0]["deployType"] = "1"
				this.dialogform.cmdbDeployList[0]["deployName"] = this.dialogform.deployName
				this.dialogform.cmdbDeployList[0]["k8sDepartment"] = this.dialogform.cmdbDeployList[0].departmentName
				this.dialogform.cmdbDeployList[0]["k8sDepartmemtId"] = this.dialogform.cmdbDeployList[0].departmentId
				this.dialogform.cmdbDeployList[0]["k8sProject"] = this.dialogform.cmdbDeployList[0].projectName
				this.dialogform.cmdbDeployList[0]["k8sProjectid"] = this.dialogform.cmdbDeployList[0].projectId
				this.dialogform.cmdbDeployList[0]["jenkinsView"] = this.dialogform.jenkinsView
				this.dialogform.status = 0

				createservice(this.dialogform)
					.then((response) => {
						console.log(response)
						this.dialogFormVisible = false;
						this.$message({
							type: 'success',
							message: '新增成功!'
						});
						this.$store.dispatch('setServiceOptions');
						this.onSearch();
					})
			},
			dialogFormsubmit2() {
				this.dialogform2.cmdbDeployList[0]["k8sName"] = this.dialogform2.cmdbDeployList[0].wayneId
				this.dialogform2.cmdbDeployList[0]["k8sDeployment"] = this.dialogform2.cmdbDeployList[0].deploymentName
				this.dialogform2.cmdbDeployList[0]["k8sDeploymentid"] = this.dialogform2.cmdbDeployList[0].deploymentId
				this.dialogform2.cmdbDeployList[0]["serviceUrl"] = this.dialogform2.cmdbDeployList[0].ingress
				this.dialogform2.cmdbDeployList[0]["deployType"] = "1"
				this.dialogform2.cmdbDeployList[0]["deployName"] = this.dialogform2.deployName
				this.dialogform2.cmdbDeployList[0]["k8sDepartment"] = this.dialogform2.cmdbDeployList[0].departmentName
				this.dialogform2.cmdbDeployList[0]["k8sDepartmemtId"] = this.dialogform2.cmdbDeployList[0].departmentId
				this.dialogform2.cmdbDeployList[0]["k8sProject"] = this.dialogform2.cmdbDeployList[0].projectName
				this.dialogform2.cmdbDeployList[0]["k8sProjectid"] = this.dialogform2.cmdbDeployList[0].projectId
				this.dialogform2.cmdbDeployList[0]["serviceId"] = this.dialogform2.id
				this.dialogform2.cmdbDeployList[0]["jenkinsView"] = this.dialogform2.jenkinsView
				this.dialogform2.status = 0
			
				pushtoservice(this.dialogform2)
					.then((response) => {
						console.log(response)
						this.dialogFormVisible2 = false;
						this.$message({
							type: 'success',
							message: '新增成功!'
						});
						this.$store.dispatch('setServiceOptions');
						this.onSearch();
					})
			},
			chooseInstance(val) {

				if (val.length > 1) {
					this.tableSelection = val[1]
					this.$refs.multipleTable.clearSelection()
					this.$refs.multipleTable.toggleRowSelection(val.pop())

				} else {
					this.tableSelection = val[0]
				}

			},
			pushService(){
				let alert = false;
				if (!this.tableSelection) {
					alert = true;
				}
				let cmdbDeployList = JSON.stringify(this.tableSelection)
				if (cmdbDeployList == "{}") {
					alert = true;
				
				}
				
				if (alert) {
					this.$message({
						type: 'error',
						message: '请选择一条记录进行服务新增'
					});
					return;
				}
				if(this.tableSelection.cmdbServiceId){
					this.$message({
						type: 'error',
						message: '已经关联了服务,不能进行相关操作'
					});
					return;
				}
				this.dialogFormVisible2 = true;
				this.dialogform2 = {
					cmdbDeployList: []
				}
				this.dialogform2.cmdbDeployList.push(JSON.parse(cmdbDeployList));
			}


		},
		components: {
			headTop,
		},
	}
</script>

<style>
	.el-table .cell {
		white-space: pre-line !important;
	}

	.el-table-column--selection {
		.cell {
			display: none;
		}
	}
</style>
